<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header mb10">
                <div class="container-header-tr">
                    <div>
                        <span style="width: 80px" class="s1">{{
                            $t('basics.userName')
                        }}</span>
                        <a-input
                            v-model="form.task_name"
                            :placeholder="$t('basics.textAcc')"
                        />
                    </div>
                    <div>
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="searchButton"
                        >
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button type="secondary" @click="resetButton">
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content">
                <div class="container-content-button"></div>
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #status="{ record }">
                            <span v-if="record.status == 1">未开始</span>
                            <span v-if="record.status == 2">进行中</span>
                            <span v-if="record.status == 3">停止</span>
                            <span v-if="record.status == 4">已完成</span>
                        </template>
                        <template #operate="{ record }">
                            <a-link @click="toDetail(record.id)"> 详情</a-link>
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="pageList.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="form.page"
                            v-model:page-size="form.pageSize"
                            style="display: inline-flex"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { getListByUser } from '@/api/america/massProduction.js';
import { useRouter } from 'vue-router';
const router = useRouter();
const loading = ref(true);
const columns = [
    {
        title: '任务名称',
        dataIndex: 'task_name',
        minWidth: 150,
        slotName: 'task_name'
    },
    {
        title: '预计发送',
        dataIndex: 'num_of_message',
        minWidth: 150,
        slotName: 'num_of_message'
    },
    {
        title: '发送成功',
        dataIndex: 'num_of_success_sent',
        minWidth: 150,
        slotName: 'num_of_success_sent'
    },
    {
        title: '发送失败',
        dataIndex: 'num_of_failed_sent',
        minWidth: 150,
        slotName: 'num_of_failed_sent'
    },
    {
        title: '状态',
        dataIndex: 'status',
        minWidth: 150,
        slotName: 'status'
    },
    {
        title: '创建时间',
        dataIndex: 'created_at',
        minWidth: 150
    },
    {
        title: '操作',
        dataIndex: 'operate',
        width: 150,
        slotName: 'operate'
    }
];

const form = ref({
    task_name: '',
    page: 1,
    pageSize: 10
});
const tableList = ref([]);
const pageList = ref({
    total: 0
});
// 获取列表数据
const getList = () => {
    loading.value = true;
    getListByUser(form.value).then((res) => {
        tableList.value = res.data.items;
        pageList.value = res.data.pageInfo;
        loading.value = false;
    });
};
getList();
// 搜索
const searchButton = () => {
    getList();
};
const reset = () => {
    form.value.task_name = '';
    form.value.page = 1;
    form.value.pageSize = 10;
};

const resetButton = () => {
    reset();
    getList();
};
//   进入详情
const toDetail = async (id) => {
    try {
        await router.push({ name: 'korea:taskDetail', query: { id } });
    } catch (error) {
        if (error.isNavigationFailure) {
            // 处理导航失败的情况
            console.error('Navigation failed due to permissions', error);
        } else {
            proxy.$message.error('没有权限');
        }
    }
};
</script>
<script>
export default { name: 'korea:taskList' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
